<template>
  <div class="songSheetDetails">
    <back-nav title="歌单详情"></back-nav>
    <song-sheet2 :list-data="listData"></song-sheet2>
  </div>
</template>

<script>
  import SongSheet2 from "../components/SongSheet2";
  import BackNav from "../components/BackNav";
  export default {
    name: "SongSheetDetails",
    components: {
      SongSheet2,
      BackNav
    },
    data(){
      /** listData:{
       *    id
       *    name  //标题
       *    playCount
       *    coverImgUrl
       *    tracks: []  //歌曲列表
       *    tracks[0].al.id  //歌的id
       *    tracks[0].al.name  //歌名
       *    tracks[0].ar[0].name  //第一个歌手名字
       *  }
       * */
      return {
        listData: {}
      };
    },
    methods: {
      getData(id){
        this.listData = {};
        this.$axios.get(`/api/playlist/detail?id=${id}`)
          .then(res => {
            this.listData = res.data.playlist;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    activated(){
      // console.log("父组件activited");
      let id = this.$route.params.id;
      if(id){
        this.getData(id);
      }
    }
  }
</script>

<style scoped>
  .songSheetDetails{
    width: 100%;
  }
</style>